RecordGridPanel = function(cfg) {
	var type = cfg.type.toUpperCase() || 'A'; 
	var sm = new Ext.grid.CheckboxSelectionModel();
	
	var colId = {
		id:'id',
		header: "Id",
		dataIndex: 'id',
		width: 100,
		readOnly: true,
		hidden: true
	};
	

	var colHost = {
	   id:'host',
	   header: "Host",
	   dataIndex: 'host',
	   width: 200,
	   editor: new Ext.form.TextField({
		   allowBlank: false,
		   blankText: 'Host is required.',
	   })
	};
	
	var colData = {
		id:'data',
	   header: "Data",
	   dataIndex: 'data',
	   width: 120,
	   editor: new Ext.form.TextField({
			allowBlank: false,
			blankText: 'Data is required.',
		   
		})
	};
	var colDataIPv4 = {
		id:'data',
	   header: "Data",
	   dataIndex: 'data',
	   width: 120,
	   editor: new Ext.form.TextField({
			allowBlank: false,
			blankText: 'Data is required.',
		   
		})
	};
	
	var colDataIPv6 = {
		id:'data',
	   header: "Data",
	   dataIndex: 'data',
	   width: 120,
	   editor: new Ext.form.TextField({
			allowBlank: false,
			blankText: 'Data is required.',
		   
		})
	};
   var colTTL ={
	   header: "TTL",
	   dataIndex: 'ttl',
	   width: 60,
	   align: 'right',
	   editor: new Ext.form.NumberField({
		   allowBlank: false,
		   blankText: 'TTL is required.',
		   allowNegative: false,
		   allowDecimals: false,
		   maxValue: 2147483647,
		   maxText: 'TTL cannot be greater than 2147483647.'
	   })
	};
  	var colPriority ={
	   header: "Priority",
	   dataIndex: 'priority',
	   width: 60,
	   align: 'right',
	   editor: new Ext.form.NumberField({
		   allowBlank: false,
		   blankText: 'Priority is required.',
		   allowNegative: false,
		   allowDecimals: false,
		   maxValue: 65535,
		   maxText: 'Priority cannot be greater than 65535.'
	   })
	};
	
	
	
	switch (type) {
		case 'A': 
			var columns = [sm, colId, colHost, colDataIPv4, colTTL];
			break;
			
		case 'AAAA':
			var columns = [sm, colId, colHost, colDataIPv6, colTTL];
			break;
			
		case 'CNAME':
			var columns = [sm, colId, colHost, colData, colTTL];
			break;
			
		case 'MX':
			var columns = [sm,  colId,colPriority, colHost, colData, colTTL];
			break;
			
		case 'NS':
			var columns = [sm, colId, colData, colTTL];
			break;
			
		case 'TXT':
			var columns = [sm, colId, colHost, colData, colTTL];
			break;
			
		default:
			Ext.ux.Status.log({
				msg: "Type " + type + " is not valid. Script error!",
				type: 'error'
			});
	}
	
	var cm = new Ext.grid.ColumnModel(columns);
	cm.defaultSortable = true; // by default columns are sortable

	


	var ds = new Ext.data.JsonStore({
		url: '/xhr/record/open.php',
		root: 'records',
		id: 'id', // unique id for each row in the database
		baseParams: { // post params to server
			type: type,
			zone: cfg.zone
		}, fields: [
			{name: 'id', type: 'int'},
			{name: 'priority', type: 'int'},
			{name: 'host', type: 'string'},
			{name: 'data', type: 'string'},
			{name: 'ttl', type: 'int'}
		],
		sortInfo:{field:'host', direction:'ASC'},
		
	});
	
	ds.load({callback: function(r, options, success){
		if (success){
			if (!Ext.isEmpty(r)) { // has atleast 1 item
				var items = this.data.items;
				// log each item opened
				items.forEach(function(e){
					Ext.ux.Status.log({
						msg: "Record " + e.id + " opened.",
						type: 'debug'
					});
				});
				
				grid.expand(); // expand non empty grids
			} else {
				// empty
			
			}
		
		} else {
			// failure
			Ext.ux.Status.log({
				msg: "Cannot open record. XHR failure!",
				type: 'error'
			});
		}
	}});
	
	

  
	
	

	
	var grid = new Ext.grid.EditorGridPanel({
		title: type + ' Records',
		collapsible:true,
		collapsed: true,
		autoHeight: true,
		autoWidth: true,
		frame:true,
		store: ds,
		cm: cm,
		sm: sm,
		iconCls: 'record-icon',
		viewConfig: {
			forceFit:true,
			emptyText: "There are no records of this type."
		},
		clicksToEdit:1,
		tbar: [{
			text: 'Add Record',
			iconCls: 'add-icon',
			handler : function(){
				Ext.Ajax.request({
					url: 'xhr/record/add.php',
					params: {
						type: type,
						zone: cfg.zone	
					},
					success: function(response, options) {
						var jsonData = new Object();
						try {
							jsonData = Ext.util.JSON.decode(response.responseText);
						}
						catch (err) {
							jsonData.success = false;
							jsonData.msg = "Error decoding JSON response!";
						}
						
						if (jsonData.success) {
							// update record store
							ds.reload();
						}
						
						// log to status panel
						Ext.ux.Status.log({
							msg: jsonData.msg,
							success: jsonData.success
						});
					},
					failure: function(response, options) {
						// log to status panel
						Ext.ux.Status.log({
							msg: "Error adding record. XHR failure!",
							type: 'error'
						});
					}
				});
			}
		},{
			text: 'Remove',
			iconCls: 'delete-icon',
			handler : function() {
				var selections = grid.getSelectionModel().getSelections();
				
				if (Ext.isEmpty(selections)) {
					Ext.ux.NotificationBox.msg("Empty", "Nothing to remove. Select a record first.");
				}
				
				selections.forEach(function(e) {
					Ext.Ajax.request({
						url: 'xhr/record/remove.php',
						params: {
							id: e.id,
							zone: cfg.zone	
						},
						success: function(response, options) {
							var jsonData = new Object();
							
							try {
								jsonData = Ext.util.JSON.decode(response.responseText);
							}
							catch (err) {
								jsonData.success = false;
								jsonData.msg = "Error decoding JSON response!";
							}
							
							if (jsonData.success) {
								// update record store
								ds.reload();
							}
							
							// log to status panel
							Ext.ux.Status.log({
								msg: jsonData.msg,
								success: jsonData.success
							});
							
						},
						failure: function(response, options) {
							// log to status panel
							Ext.ux.Status.log({
								msg: "Error removing record. XHR failure!",
								type: 'error'
							});
						}
					}); 
				});
			} // handler
		},{
			text: 'Save',
			iconCls: 'save-icon',
			handler : function(){
				// FFFFFFFFFFFFFFFFFFFFFFF ix
				Ext.ux.NotificationBox.msg("Save", "Auto save is on.");
				
			}
		},{
			text: 'Refresh',
			iconCls: 'refresh-icon',
			handler : function(){
				ds.reload();
				
			}
		}]

	});

   
	

	
	function updateDB(e){
		
		console.debug(e);
		 id = ds.data.items[e.row].id;
			  Ext.Ajax.request({
				 url: 'xhr/record/save.php',
				 method: 'POST',
				 params: {
					id: id,
					field: e.field,
					value: e.value
				 },
					success: function(response, options) {
					// This is the simple way to get feedback from the server
						// Ext.MessageBox.alert('Success', 'Data returned from the server: '+ result.responseText);
						
						
						
						var jsonData = new Object();
						try {
							jsonData = Ext.util.JSON.decode(response.responseText);
						}
						catch (err) {
							jsonData.success = false;
							jsonData.msg = "Error decoding JSON response!";
						}
						
						
						if (jsonData.success) {
							ds.commitChanges();
						}
						
						// log to status panel
						Ext.ux.Status.log({
							msg: jsonData.msg,
							success: jsonData.success
						});
						
						
					
					},
					failure: function(response, options) {
						Ext.ux.Status.log({
							msg: "Record failed to save. XHR failure!",
							type: 'error'
						});
					}
		// Or one could use only one callback (instead of success/failure)
		//		 callback: function (options, success, result) {
		//			if (success) {
		//			   Ext.MessageBox.alert('OK',result.responseText);
		//			   var json = Ext.util.JSON.decode(result.responseText);
		//			   Ext.MessageBox.alert('OK',json.sum);
		//			   You could update an element on your page with the result from the server (e.g.<div id='total'></div>)
		//			   var total = Ext.get('total');
		//			   total.update(json.sum);
		//			} else {
		//			   Ext.MessageBox.alert('Ajax call failed',result.responseText);
		//			}
		//		 }
			  });   
	
	
	}
	
	grid.on('afteredit', updateDB);
	
	
	
	// ########## Public Functions ##########
	return {
		render: function(container) {
			grid.render(container);
		}
	}

} 